<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            height: 300px;
            width: 250px;
            background-color: brown;
            margin: 0 auto;
            overflow: hidden;
        }

        .today {
            color: antiquewhite;
            font-size: 16px;
            text-align: center;
            margin-top: 20px;
        }

        .title {
            margin-top: 20px;
            text-align: center;
            font-size: 30px;
            color: antiquewhite;
        }

        .time {
            font-size: 25px;
            color: white;
            text-align: center;
            margin-top: 30px;
        }

        .time span {
            /* border: 1px solid black; */
            padding: 2px;
            background-color: rgb(53, 51, 51);;
        }

        .end {
            font-size: 25px;
            color: whitesmoke;
            margin-top: 70px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="box">
        <div class="today">今天是<span>2028年12月2日</span></div>
        <div class="title">秒杀倒计时</div>

        <div class="time">
            <span class="hour">23</span>&nbsp;:&nbsp;<span class="minute">30</span>&nbsp;:&nbsp;<span class="second">27</span>
        </div>

        <div class="end">20:30准时开抢</div>
    </div>

<script>
    const endtime = +new Date("2024-12-10 20:30:00")
    
    const shour = document.querySelector(".hour")
    const sminute = document.querySelector(".minute")
    const ssecond = document.querySelector(".second")
    const today = document.querySelector(".today span")
    const date = new Date()
    today.innerHTML = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日"
    function count() {
        const now = +new Date()
        const diff = (endtime - now) / 1000
        const d = parseInt(diff / 60 / 60 / 24)
        // console.log(d)
        let h = parseInt(diff / 60 / 60 % 24)
        if (h < 10) h = '0' + h
        let m = parseInt(diff / 60 % 60)
        if (m < 10) m = '0' + m
        let s = parseInt(diff % 60)
        if (s < 10) s = '0' + s
        shour.innerHTML = h
        sminute.innerHTML = m
        ssecond.innerHTML = s
    }
    count()
    setInterval(count, 1000)


</script>
    
</body>
</html>